<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>角色管理</title>

    <!--[if IE 7]>
    <link rel="stylesheet" href="../../css/font-awesome-ie7.min.css"/>
    <![endif]-->

    <link rel="stylesheet" href="../../css/jquery-ui-1.10.3.full.min.css"/>
    <link rel="stylesheet" href="../../css/datepicker.css"/>
    <link rel="stylesheet" href="../../css/ui.jqgrid.css"/>

    <link rel="stylesheet" href="../../css/ace.min.css"/>
    <link rel="stylesheet" href="../../css/ace-rtl.min.css"/>
    <link rel="stylesheet" href="../../css/ace-skins.min.css"/>
    <link rel="stylesheet" href="../../css/plugins/iCheck/all.css">

    <!--[if lte IE 8]>
    <link rel="stylesheet" href="../../css/ace-ie.min.css"/>
    <![endif]-->

    <script src="../../js/date-time/bootstrap-datepicker.min.js"></script>

    <%-- icheck --%>
    <script src="../../js/plugins/iCheck/icheck.js"></script>
    <script src="../../js/plugins/iCheck/myiCheck.js"></script>
    <%-- 分页插件 --%>
    <script type="text/javascript" src="../../js/plugins/jqPaginator/jqPaginator.js"></script>
    <%-- ajax form ajax submit --%>
    <script type="text/javascript" src="../../js/plugins/form/jquery.form.js"></script>
    <script type="text/javascript" src="../../js/plugins/md5/jquery.md5.js"></script>
    <script type="text/javascript" src="../../modules/auth/admin.js"></script>

</head>
<body>

<div class="main-content">
    <div class="breadcrumbs" id="breadcrumbs">
        <script type="text/javascript">
            try {
                ace.settings.check('breadcrumbs', 'fixed')
            } catch (e) {
            }
        </script>

        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i><a href="#">后台系统权限</a>
            </li>
            <li class="active">用户管理</li>
        </ul>
        <!-- .breadcrumb -->

        <div class="nav-search" id="nav-search">
            <form class="form-search">
				<span class="input-icon">
					<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input"
                           autocomplete="off"/>
					<i class="icon-search nav-search-icon"></i>
				</span>
            </form>
        </div>
        <!-- #nav-search -->
    </div>

    <div class="page-content">
        <div class="row">
            <div class="col-xs-12">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        角色列表
                        <div class="pull-right" style="margin-right: 20px;margin-top: -7px;">
                            <shiro:hasPermission name="admin:add">
                                <button class="btn btn-success btn-sm" type="button" data-toggle="modal" data-target="#addAdmin">
                                    <span class="icon-zoom-in bigger-130"></span><strong>新增记录</strong>
                                </button>
                            </shiro:hasPermission>
                            <shiro:hasPermission name="admin:delete">
                                <button class="btn btn-danger btn-sm ml10" type="button" onclick="deleteData()">
                                    <span class="icon-trash bigger-130"></span><strong>批量删除</strong>
                                </button>
                            </shiro:hasPermission>
                        </div>
                    </div>
                    <div class="panel-body">
                        <table id="pageInfoData" class="table table-hover table-bordered table-striped">
                            <thead>
                            <tr>
                                <th width="50"><input type="checkbox" id="chkAll" name="chkAll"></th>
                                <th>ID</th>
                                <th>登录名</th>
                                <th>手机号</th>
                                <th>邮箱</th>
                                <th>姓名</th>
                                <th>昵称</th>
                                <th>头像</th>
                                <th>性别</th>
                                <th>账号状态</th>
                                <th>登录次数</th>
                                <th>备注</th>
                                <th>最近活动时间</th>
                                <th>创建时间</th>
                                <th width="150">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${pageInfo.list}" var="data">
                                <tr>
                                    <td class="t_c"><input type="checkbox" name="chkList"></td>
                                    <td class="t_c">${data.id}</td>
                                    <td class="t_c">${data.name}</td>
                                    <td class="t_c">${data.aliases}</td>
                                    <td class="t_c">${data.enName}</td>
                                    <td class="t_c">${data.remark}</td>
                                    <td class="t_c">
                                        <fmt:formatDate value="${data.createDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                    </td>
                                    <td class="t_c">
                                        <div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
                                            <a class="green" href="#" data-toggle="modal" data-target="#editAdmin"
                                               data-whatever="${data.id}"> <i class="icon-pencil bigger-130"></i></a>
                                            <a class="red" href="#"> <i class="icon-trash bigger-130"></i></a>
                                        </div>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                    <div class="panel-footer">
                        <div class="row" style="line-height: initial;">
                            <div class="col-xs-5" style="padding-top: 10px;">
                                <span id="pageInfo"></span>
                            </div>
                            <div class="col-xs-7">
                                <div class="dataTables_paginate paging_bootstrap">
                                    <ul class="pagination" id="pagination"></ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <%-- 添加用户弹出层 --%>
        <div class="modal fade" id="addAdmin" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <form role="form" action="/admin/add" method="post" id="addAdminForm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="exampleModalLabel">添加用户</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">登录名:</label>
                                        <input type="text" class="form-control" name="userName" placeholder="登录名">
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">登录密码:</label>
                                        <input type="password" class="form-control" name="pswd" placeholder="登录密码">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">手机号:</label>
                                        <input type="text" class="form-control" name="cellphone" placeholder="手机号">
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">邮箱:</label>
                                        <input type="email" class="form-control" name="email" placeholder="邮箱">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">姓名:</label>
                                        <input type="text" class="form-control" name="name" placeholder="姓名">
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">昵称:</label>
                                        <input type="text" class="form-control" name="nickName" placeholder="昵称">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">备注:</label>
                                        <input type="text" class="form-control" name="remark" placeholder="备注">
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">确认</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <%-- 修改用户弹出层 --%>
        <div class="modal fade" id="editAdmin" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabe2">
            <div class="modal-dialog" role="document">
                <form role="form" action="/admin/edit" method="post" id="editAdminForm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="exampleModalLabe2">修改用户</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <input type="text" class="form-control" name="id" id="edit_id" style="display: none;">

                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">登录名:</label>
                                        <input type="text" class="form-control" name="userName" id="edit_userName"
                                               placeholder="登录名">
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">登录密码:</label>
                                        <input type="password" class="form-control" name="pswd" id="edit_pswd"
                                               placeholder="登录密码">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">手机号:</label>
                                        <input type="text" class="form-control" name="cellphone" id="edit_cellphone"
                                               placeholder="手机号">
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">邮箱:</label>
                                        <input type="email" class="form-control" name="email" id="edit_email"
                                               placeholder="邮箱">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">姓名:</label>
                                        <input type="text" class="form-control" name="name" id="edit_name"
                                               placeholder="姓名">
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">昵称:</label>
                                        <input type="text" class="form-control" name="nickName" id="edit_nickName"
                                               placeholder="昵称">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">状态:</label>
                                        <select class="form-control" name="state" id="edit_state">
                                            <option value="" selected>----请选择状态----</option>
                                            <option value="normal">激活</option>
                                            <option value="locked">锁定</option>
                                            <option value="out">注销</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">备注:</label>
                                        <input type="text" class="form-control" name="remark" id="edit_remark" placeholder="备注">
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">确认</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>


        <%-- 用户分配角色弹出层 --%>
        <div class="modal fade" id="roleAssignment" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabe3">
            <div class="modal-dialog" role="document">
                <form role="form" action="/admin/addRole" method="post" id="roleAssignmentForm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="exampleModalLabe3">分配角色</h4>
                        </div>
                        <div class="modal-body">
                            <input type="text" class="form-control" name="adminId" id="role_ass_admin_id"
                                   style="display: none;">
                            <table id="pageInfoRoleAssData" class="table table-hover table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th width="58">
                                        <input type="checkbox" id="assChkAll" name="assChkAll">
                                    </th>
                                    <th>ID</th>
                                    <th>角色名称</th>
                                    <th>别名</th>
                                    <th>英文名称</th>
                                    <th>角色描述</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" onclick="addRole()">确认</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        // 初始化权限
        verifyHasAdminPermission();

        $("#pagination").jqPaginator({
            totalPages: 1,
            visiblePages: 7,
            currentPage: 1,
            first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',
            prev: '<li class="prev"><a href="javascript:void(0);"><i class="arrow arrow2"><\/i>上一页<\/a><\/li>',
            next: '<li class="next"><a href="javascript:void(0);">下一页<i class="arrow arrow3"><\/i><\/a><\/li>',
            last: '<li class="last"><a href="javascript:void(0);">末页<\/a><\/li>',
            page: '<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>',
            onPageChange: function (pageNum, type) {
                page(pageNum);
            }
        });
    });
</script>
</body>
</html>